<div data-cy="invites_block" id="invite_block" class="pt-4 mb-6">
    {% if invites %}
        <h2>{{_('pending_invites')}}</h2>
        <div class="w-full overflow-x-auto border rounded-lg">
          <table class="w-full">
          <thead>
              <tr class="bg-blue-300 text-blue-900">
                  <th class="px-2 py-2 text-center">{{_('username')}}</th>
                  <th class="px-2 py-2 text-center">{{_('role')}}</th>
                  <th class="px-2 py-2 text-center">{{_('invite_date')}}</th>
                  <th class="px-2 py-2 text-center">{{_('expiration_date')}}</th>
                  {% if not is_second_teacher %}<th class="px-2 p-2 bg-blue-900 text-white">{{_('remove')}}</th>{% endif %}
              </tr>
          </thead>
          <tbody>
          {% for invite in invites %}
              <tr class="{% if loop.index is divisibleby 2 %}bg-gray-200{% else %}bg-white{% endif %} m-2">
                  <td class="p-2 text-center font-medium text-blue-900" data-cy="invite_username_cell">{{invite.username}}</td>
                  <td class="p-2 text-center font-medium text-blue-900">{{invite.invited_as_text}}</td>
                  <td class="p-2 text-center font-medium text-blue-900">{{invite.timestamp}}</td>
                  <td class="p-2 text-center font-medium text-blue-900">{{invite.expire_timestamp}}</td>
                  {% if not is_second_teacher %}<td class="p-2 text-center font-medium text-blue-900"><a href="#" data-cy="remove_user_invitation" onclick='hedyApp.remove_student_invite("{{invite.username}}", "{{ class_id }}", {{_('delete_invite_prompt')|default(None)|tojson}})'><i class="fa-solid fa-trash text-red-500"></a></td>{% endif %}
              </tr>
          {% endfor %}
          </tbody>
          </table>
        </div>
    {% endif %}
</div>